<template>
  <div>
    <!--头部区域开始-->
    <div style="height: 50px; display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: linear-gradient(145deg, var(--nebula-primary), var(--nebula-secondary));">
      <div style="width: 200px; display: flex; align-items: center; padding-left: 15px; background: transparent;">
        <img style="width: 40px; height: 40px; border-radius: 50%;" src="@/assets/imgs/logo.png">
        <span style="font-size: 20px; font-weight: bold; color: #f1f1f1; margin-left: 5px;">NebulaNode</span>
      </div>
      <div style="flex: 1; display: flex; align-items: center; padding-left: 20px; border-bottom: 1px solid rgba(255,255,255,0.1);">
        <span style="margin-right: 5px; cursor: pointer; color: rgba(255,255,255,0.8);" @click="router.push('/manager/home')">首页</span> /
        <span style="margin-left: 5px; color: rgba(255,255,255,0.8);">{{ router.currentRoute.value.meta.name }}</span>
      </div>
      <div style="width: fit-content; display: flex; align-items: center; padding-right: 20px; border-bottom: 1px solid rgba(255,255,255,0.1);">
        <el-dropdown>
          <div style="display: flex; align-items: center;">
            <img style="width: 40px; height: 40px; border-radius: 50%;" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
            <span style="margin-left: 5px; color: #f1f1f1;">{{ data.user?.name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/manager/person')">个人信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/manager/updatePassword')">修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!--头部区域结束-->
    <!--下方区域开始-->
    <div style="display: flex; margin-top: 50px;">
      <!--菜单区域开始-->
      <div style="width: 200px; position: fixed; top: 50px; bottom: 0; box-shadow: 0 0 8px rgba(0,0,0,.12); z-index: 999;">
        <el-menu router :default-openeds="['1','2']" :default-active="router.currentRoute.value.path" style="height: 100%;">
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><monitor /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/manager/vm">虚拟机管理</el-menu-item>
            <el-menu-item index="/manager/charts">仪表盘</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><user /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/user">用户信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <!--菜单区域结束-->
      <!--数据渲染区域开始-->
      <div ref="contentArea" class="content-area" style="flex: 1; margin-left: 200px; padding: 10px; background-color: #f2f4ff; min-height: calc(100vh - 50px); overflow-x: hidden;" :style="{ overflowY: isScrollable ? 'auto' : 'hidden' }">
        <RouterView @updataUser="updataUser"/>
      </div>
      <!--数据渲染区域结束-->
    </div>
    <!--下方区域结束-->
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { reactive, ref, onMounted, watch, nextTick, onUnmounted } from "vue";

const data = reactive({
user: JSON.parse(localStorage.getItem("code_user" || "{}"))
});

// 内容区域引用
const contentArea = ref(null);
// 是否需要纵向滚动
const isScrollable = ref(false);

// 检查内容是否需要滚动
const checkScrollable = () => {
nextTick(() => {
  if (contentArea.value) {
    // 使用 scrollHeight 获取内容总高度（包括不可见部分）
    const contentHeight = contentArea.value.scrollHeight;
    const viewportHeight = window.innerHeight;
    // 排除 padding以避免触发不必要的滚动
    const adjustedContentHeight = contentHeight - 70;
    isScrollable.value = adjustedContentHeight > viewportHeight;
  }
});
};

// 初始化和监听
onMounted(() => {
checkScrollable();
window.addEventListener('resize', checkScrollable);
});

// 监听路由变化，检查内容高度
watch(() => router.currentRoute.value.path, () => {
checkScrollable();
});

// 清理事件监听
onUnmounted(() => {
window.removeEventListener('resize', checkScrollable);
});
</script>

<style>
/* 星云主题变量 */
:root {
--nebula-primary: #1a2035;       /* 深空背景 */
--nebula-secondary: #2a325d;     /* 星云暗蓝 */
--stellar-accent: #537bee;       /* 能量蓝 */
--cosmic-purple: #7d5fff;       /* 星云紫 */
--plasma-pink: #ff6ec7;         /* 离子粉 */
--event-horizon: rgba(255,255,255,0.08); /* 悬浮效果 */
}

/* 菜单系统 */
.el-menu {
background: var(--nebula-primary) !important;
border-right: 1px solid rgba(255,255,255,0.05) !important;
--el-menu-active-color: #fff;
--el-menu-text-color: rgba(255,255,255,0.7);
}

.el-sub-menu__title,
.el-menu-item {
background: transparent !important;
color: rgba(255,255,255,0.8) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 菜单项悬浮效果 */
.el-menu-item:not(.is-active):hover {
background: var(--event-horizon) !important;
color: #fff !important;
transform: translateX(4px);
}

/* 激活状态 - 脉冲效果 */
.el-menu-item.is-active {
background: linear-gradient(90deg, var(--nebula-secondary), var(--stellar-accent)) !important;
color: #fff !important;
box-shadow: 0 0 15px rgba(83, 123, 238, 0.5);
position: relative;
}

.el-menu-item.is-active::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: var(--plasma-pink);
border-radius: 2px;
}

/* 子菜单标题 */
.el-sub-menu__title:hover {
color: var(--cosmic-purple) !important;
}

/* 下拉菜单 */
.el-dropdown-menu {
background: var(--nebula-primary) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
}

.el-dropdown-menu__item {
color: rgba(255,255,255,0.8) !important;
}

.el-dropdown-menu__item:hover {
background: var(--nebula-secondary) !important;
color: var(--cosmic-purple) !important;
}

/* 折叠菜单动画 */
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-sub-menu__title span {
display: inline-block;
width: 0;
opacity: 0;
transition: all 0.3s;
}

/* 自定义滚动条样式 */
.content-area::-webkit-scrollbar {
width: 8px;
}

.content-area::-webkit-scrollbar-track {
background: var(--nebula-primary);
border-radius: 4px;
}

.content-area::-webkit-scrollbar-thumb {
background: var(--stellar-accent);
border-radius: 4px;
transition: background 0.3s;
}

.content-area::-webkit-scrollbar-thumb:hover {
background: var(--cosmic-purple);
}

/* Firefox 滚动条 */
.content-area {
scrollbar-width: thin;
scrollbar-color: var(--stellar-accent) var(--nebula-primary);
}

/* 响应式优化 */
@media (max-width: 768px) {
.el-menu {
  --el-menu-item-height: 44px;
}

.el-menu-item.is-active::after {
  width: 2px;
}

.content-area::-webkit-scrollbar {
  width: 6px;
}
}

/* 星际过渡效果 */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.8s;
}
</style>